<template>
  <div class="news-list">
    <v-title :title="$route.meta.title || '种草'" />
    <arrow v-if="false" />
    <loading :show="loading" />
    <tags
      v-if="category.length > 0"
      :labels="labels"
      :current-label="currentLabel"
      @clickLabel="clickLabel"
      style="margin-top: 10px;"
      class="tag"></tags>
    <ul class="list">
      <template v-for="(item, index) in list">
        <li
          :key="index"
          class="list-item"
          @click="$router.push(`/article/view/${item.id}`)"
        >
          <div class="item">
            <div class="image" v-if="item.image && item.image.thumbnail_path">
              <img v-lazy="item.image.thumbnail_path" />
            </div>
            <div class="title">{{ item.title }}</div>
            <div class="date">浏览次数: {{ +item.view + +item.view_virtual }}</div>
          </div>
        </li>
      </template>
    </ul>
    <pull-up
      :loading="loading"
      :busy="queryList.busy"
      @loadMore="loadMore" />
  </div>
</template>

<script>
import Tags from '../service/components/Tags'
import Title from '@/components/Title'
import Arrow from '@/components/Arrow'
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'
import PullUp from '@/components/PullUp'

export default {
  name: 'newsList',
  components: {
    'v-title': Title,
    Arrow,
    Loading,
    PullUp,
    Tags
  },
  computed: {
    currentLabel() {
      return this.labels[this.current]
    }
  },
  data() {
    return {
      loading: false,
      list: [],
      queryList: {
        page: 0,
        pageSize: 5,
        busy: false
      },
      labels: [],
      current: 0,
      category: []
    }
  },
  methods: {
    clickLabel(index) {
      this.current = index
      this.init()
      this.list = []
      this.getList()
    },
    loadMore() {
      setTimeout(() => {
        this.getList(true)
      }, 200)
    },
    init() {
      this.queryList = this.queryList = {
        page: 0,
        pageSize: 10,
        busy: false
      }
    },
    getCategory() {
      api.Article.category().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.category = data.list
        // console.log(data.list)
        // labels
        this.labels = this.category.map(x => x.name)
      })
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        const category = this.category[this.current]
        // console.log(category)
        api.Article.list({ ...this.queryList, category: (category && category.id) || 0 }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
        }).finally(() => {
          this.loading = false
        })
      }
    }
  },
  created () {
    this.getList()
    this.getCategory()
  },
  activated () {
    // this.getList()
  },
  deactivated () {
    this.queryList.busy = true
  }
}
</script>

<style scoped lang="stylus">
.news-list
  padding-top 45px
  .list
    margin 10px
    display flex
    flex-wrap wrap
    justify-content space-between
    .list-item
      padding 10px
      border-radius 10px
      background white
      margin-bottom 10px
      width calc(50% - 25px)
      .item
        .image
          padding 10px
        .title
          font-weight 700
          font-size 14px
          line-height 1.3em
        .date
          text-align left
          height 30px
          line-height 30px
          color #ccc
</style>
